<template>
  <header class="header navbar-fixed">
    <nav class="blue-grey darken-4">
      <div class="nav-wrapper">
        <a href="#!" class="brand-logo"><img src="../assets/logo.png"/></a>
        <a href="#" data-activates="mobile-demo" class="button-collapse">
          <i class="material-icons">menu</i>
        </a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li v-for="l in menu" v-bind:key="l.title">
            <a :href="l.href">{{l.title}}</a>
          </li>
        </ul>
        <ul class="side-nav" id="mobile-demo">
          <li v-for="l in menu" v-bind:key="l.title">
            <a :href="l.href">{{l.title}}</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      menu: [
        {href: '#1', title: 'button1'},
        {href: '#2', title: 'button2'},
        {href: '#3', title: 'button3'}
      ]
    };
  }
};
</script>

<style>
.header {
  z-index: 1000;
}
.header .brand-logo img {
  margin: 9px;
  height: 46px;
}
</style>
